<?php
    $farmID=$_GET["farmID"];
    $farmClass=new farm();
    $farmClass->setFarmID($farmID);
    $farm=$farmClass->getFarm();
    $memID=$farm["memID"];
    
    $memberClass=new member($memID);
    $member=$memberClass->getMember();
    
    $dateClass=new date();
    ?>

<link href="member/member.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
    @media (orientation: landscape){
        #cropManageDIV{
            width: 60%;
            height: 100%;
            float: left;
        }
        .box-wrap{
            width: 90% !important;
        }
        div.form-group>div{
            padding-top: 7px;
        }
    }
    @media (orientation: portrait){
        #cropManageDIV{
            width: 100%;
            height: 70%;
            margin-bottom: 5px;
        }
    }
    #cropManageDIV{
        padding: 5px;
        overflow: auto;
    }
</style>
<script type="text/javascript">
    var geoLocation;

    function showPosition(position) {
        $('#geoLocation').val(position.coords.latitude + "," + position.coords.longitude);
        geoLocation=position.coords.latitude + "," + position.coords.longitude;
        $('#map-canvas').show();
        setMap();
    }
    var marker;
    var map;

    var myLatlng = new google.maps.LatLng(geoLocation);

    function initialize() {

        var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        marker = new google.maps.Marker({
            map:map,
            animation: google.maps.Animation.DROP,
            position: myLatlng
        });

        var markerIcon = {
            url: 'img/markerMedium.png'
        };

        marker.setIcon(markerIcon);

        google.maps.event.addListener (marker, 'drag', function (event) {
            document.getElementById("geoLocation").value = marker.getPosition().lat()+","+marker.getPosition().lng();
            
        });

        google.maps.event.addListener (marker, 'dragend', function (event) {
            getProvince();
            var point = marker.getPoint();
            map.panTo(point);
        });
        
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function setMap(){
        var temp=geoLocation.split(",");
        myLatlng = new google.maps.LatLng(temp[0],temp[1]);
        initialize();
    }
    
    function formSubmit(){
        var startDate= $('#startDate').val();
        var endDate= $('#endDate').val();
        if(startDate==''){
            alert('กรุณากรอก "ช่วงเวลาที่ปลูก" ให้ครบถ้วน');
            $('#startDate').focus();
        }else if(endDate==''){
            alert('กรุณากรอก "ช่วงเวลาที่ปลูก" ให้ครบถ้วน');
            $('#endDate').focus();
        }else{
            document.getElementById('addCropForm').submit();
        }
    }
</script>
<style type="text/css">
    #map-canvas {display: none;height: 10cm;width: 100%;background-color: #ccc;}
    #memberMap{
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }
</style>
<?php include "member/memberDetailDIV.php";?>
<div id="cropManageDIV">
    <div class="whiteShadow" style="overflow: hidden;width: 100%;height: 100%;padding: 5px;">
        <table style="width: 100%;">
            <tr>
                <td style="text-align: center;">
                    <input type="button" class="btn btn-default" value="< เลือก Farm" style="float: left;"
                        onclick="window.open('?page=member/farm/farm&memID=<?=$memID?>','_self')"
                        >
                    <?=$farm["farmName"]?>
                    <button class="btn btn-default" style="float: right;"
                        onclick="window.open('?page=member/farm/farm&memID=<?=$memID?>&farmID=<?=$farmID?>','_self')"
                        >
                    <div class="glyphicon glyphicon-pencil" style="float: left;margin-right: 5px;"></div>แก้ไข <?=$farm["farmName"]?>
                    </button>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 5px;">
                    <?php
                        $query="
                            select      *
                            from        member_farm_crop
                            where       farmID='".$farmID."'
                            order by    startDate asc
                            ";
                        $result=$mysqli->query($query);
                        $i=1;
                        while($row=$result->fetch_array(MYSQLI_ASSOC)){
                            ?>
                    <div class="btn btn-default" style="position: relative;width: 100%;margin-bottom: 5px;font-size: 120%;"
                        onclick="window.open('./?page=member/crop/cropCostInput&cropID=<?=$row["cropID"]?>','_self')"
                        >
                        <div style="position: absolute;font-size: 60%;">CROP <?=$i;?></div>
                        <?php
                            echo $dateClass->dateEncodeBE($row["startDate"]);
                            echo "-";
                            echo $dateClass->dateEncodeBE($row["endDate"]);
                        ?>
                    </div>
                                <?php
                            $i++;
                        }
                    ?>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="registButton"
    onclick="
        $('#addCropDIV').show();
        $('#map-canvas').show();
        geoLocation='<?=$farm["geoLocation"]?>';
        setMap();
    "
    style="
        position: fixed;
        background-color: #A1D1FF;
        border-radius: 100px;
        color: #fff;
        width: 70px;
        height: 70px;
        bottom: 40px;
        right: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 3px #000;
        ">
    <table class="noSpacing" style="width:100%;height: 100%;">
        <tr>
            <td style="text-align: center;vertical-align: middle;font-size: 30px">
                <img src="img/add.png" height="40">
            </td>
        </tr>
    </table>
</div>
<div id="addCropDIV" 
    style="
        display: none;
        position: fixed;
        top:0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        overflow: auto;
        ">
    <table class="noSpacing" style="width: 100%;height: 100%;">
        <tr>
            <td style="vertical-align: middle;height: 100%;">
                <div id="addFarmSubDIV" class="box-wrap" style="margin-left: auto;margin-right: auto;width: 500px;">
                    <div class="box-heading">
                        <h4>
                            <i class="icon-tag"></i> 
                            <span class="glyphicon glyphicon-plus"></span>
                            เพิ่มครอป
                            <span class="glyphicon glyphicon-remove" style="float: right;cursor: pointer;" onclick="$('#addCropDIV').hide()"></span>
                        </h4>
                    </div>
                    <div class="box-inner">
                        <form method="post" id="addCropForm" class="form-horizontal" action="member/crop/addCrop.php">
                            <input type="hidden" name="cropID" value="<?=$_GET["cropID"]?>">
                            <input type="hidden" id="farmID" name="farmID" value="<?=$_GET["farmID"]?>">
                            <fieldset>

                                <!-- Text input-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="farmName">ข้อมูลแปลง</label>  
                                    <div class="col-md-4">
                                        <b><?=$farm["farmName"]?></b> พื้นที่ <?=$farm["area"]?> ไร่<br>
                                        <?php
                                            $address=$farmClass->getFarmAddress();
                                            print_r($address);
                                        ?>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="farmName">ช่วงเวลาที่ปลูก</label>  
                                    <div class="col-md-4">
                                        <input id="startDate" name="startDate" class="form-control input-md" type="text" style="width:auto;float:left;margin-right: 5px;width: 100px">
                                        <div style="margin-top: 5px;margin-left: 15px;margin-right: 15px;float: left;">ถึง</div>
                                        <input id="endDate" name="endDate" class="form-control input-md" type="text" style="width:auto;float:left;margin-right: 5px;width: 100px;">
                                    </div>
                                </div>
                                
                                <div id="memberMap">
                                    <div id="map-canvas"></div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for=""></label>
                                    <div class="col-md-4">
                                        <input type='button' id="" name="" class="btn btn-primary" style="float: right;" value='บันทึก'
                                            onclick='formSubmit();'
                                            >
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(function() {
        $( "#startDate" ).datepicker( $.datepicker.regional["th"] ); // Set ภาษาที่เรานิยามไว้ด้านบน
        $( "#startDate" ).datepicker("setDate", new Date()); //Set ค่าวันปัจจุบัน
        
        $( "#endDate" ).datepicker( $.datepicker.regional["th"] ); // Set ภาษาที่เรานิยามไว้ด้านบน
        $( "#endDate" ).datepicker("setDate", new Date()); //Set ค่าวันปัจจุบัน
    });
</script>